import { View, Text } from '@tarojs/components'
import { Button } from '@nutui/nutui-react-taro'
import React from 'react'
import './index.less'

export interface Order {
  /** 订单ID */
  id: string
  /** 日期 */
  date: string
  /** 状态 */
  status: 'pending' | 'in_progress' | 'completed' | 'cancelled'
  /** 状态文字 */
  statusText: string
  /** 状态颜色 */
  statusColor?: string
  /** 金额 */
  amount: string
  /** 项目名称 */
  project: string
  /** 地址 */
  address: string
}

export interface OrderCardProps {
  /** 订单信息 */
  order: Order
  /** 点击订单卡片 */
  onOrderClick?: (orderId: string) => void
  /** 操作按钮点击 */
  onActionClick?: (action: string, orderId: string) => void
  /** 自定义类名 */
  className?: string
}

/**
 * OrderCard 订单卡片组件
 * 用于展示订单信息
 */
const OrderCard: React.FC<OrderCardProps> = ({ order, onOrderClick, onActionClick, className = '' }) => {
  const handleCardClick = () => {
    if (onOrderClick) {
      onOrderClick(order.id)
    }
  }

  const handleActionClick = (action: string, e: any) => {
    e.stopPropagation()
    if (onActionClick) {
      onActionClick(action, order.id)
    }
  }

  const getStatusClass = () => {
    switch (order.status) {
      case 'pending':
        return 'status-pending'
      case 'in_progress':
        return 'status-in-progress'
      case 'completed':
        return 'status-completed'
      case 'cancelled':
        return 'status-cancelled'
      default:
        return ''
    }
  }

  return (
    <View className={`order-card ${className}`} onClick={handleCardClick}>
      {/* Order Header */}
      <View className='order-header'>
        <View className='order-info'>
          <Text className='order-number'>订单号: {order.id}</Text>
          <Text className='order-date'>{order.date}</Text>
        </View>
        <View className={`order-status ${getStatusClass()}`}>
          <Text className='status-text'>{order.statusText}</Text>
        </View>
      </View>

      {/* Project Info */}
      <View className='project-info'>
        <Text className='project-title'>{order.project}</Text>
        <Text className='project-address'>{order.address}</Text>
      </View>

      {/* Order Footer */}
      <View className='order-footer'>
        <Text className='total-label'>总金额</Text>
        <Text className='total-amount'>{order.amount}</Text>
      </View>

      {/* Action Buttons */}
      <View className='action-buttons'>
        {order.status === 'pending' && (
          <Button
            type='primary'
            size='small'
            className='action-btn'
            onClick={(e) => handleActionClick('start', e)}>
            开始施工
          </Button>
        )}
        {order.status === 'in_progress' && (
          <Button type='default' size='small' className='action-btn' onClick={(e) => handleActionClick('progress', e)}>
            查看进度
          </Button>
        )}
        {order.status === 'completed' && (
          <Button type='default' size='small' className='action-btn' onClick={(e) => handleActionClick('rebook', e)}>
            再次预约
          </Button>
        )}
        <Button type='default' size='small' className='action-btn' onClick={(e) => handleActionClick('contact', e)}>
          联系客服
        </Button>
      </View>
    </View>
  )
}

export default OrderCard

